import platform = require('../../common/baseCommon');
import appClient = require('../appClient');
import platformControls = require('../controls');

/**
 * 模块名称
 */
const moduleName = "platform.client";

/**
 * 导航条布局主菜单
 */
@platform.addon("导航条布局主菜单", "用导航条作为菜单的主窗体，本视图支持各种导航条，支持页面切换，页面动态加载", moduleName)
@appClient.template("platform/client/mainForm/navbar/navbarMainForm.html", "platform/client/mainForm/navbar/navbarMainForm.css")
export class navbarMainForm extends appClient.baseMainForm {
    static readonly html_menu = '<li role="presentation"><a role="menuitem" tabindex="-1" name="menuItem">{0}</a></li>';
    /**
     * 导航信息
     */
    navPages?: platformControls.tabPage[];
    /**
     * 标题
     */
    $title?: JQuery = undefined;
    /**
     * 导航条
     */
    $navBar?: JQuery = undefined;
    /**
     * 内容框
     */
    $content?: JQuery = undefined;
    /**
     * 主菜单列表
     */
    $mainMenuList?: JQuery = undefined;
    /**
     * 主菜单
     */
    $mainMenu?: JQuery = undefined;

    /**
     * 绑定事件
     */
    onAfterBind?() {
        // 渲染导航页面
        if (this.navPages) {
            for (let nav of this.navPages) {
                nav.onChangeView = (page: platformControls.tabPage) => {
                    this.changePage(page);
                };
                nav.appendTo(this.$navBar);
            }
        }

        // 加载首页
        if (this.navPages && this.navPages[0]) {
            this.changePage(this.navPages[0]);
        }
    }

    /**
     * 打开视图
     * @param view 视图
     */
    protected openView?(view: appClient.baseView): void {
        super.openView(view);

        this.$title.html(view.caption);

        this.$content.children().hide();
        if (view.element) {
            $(view.element).show();
        } else {
            view.appendTo(this.$content[0]);
        }
        if (view.onShowed)
            view.onShowed();

        /**
         * 加载菜单
         */
        this.$mainMenuList.empty();
        if (view.menus && view.menus.length > 0) {
            for (let menu of view.menus) {
                let menuHtml = platform.format(navbarMainForm.html_menu, menu.caption);
                let menuItem = appClient.appendTo(this.$mainMenuList, menuHtml);

                if (menu.onClick) {
                    $(menuItem.element).find(`[name='menuItem']`).click(() => {
                        menu.onClick();
                    });
                }
            }
            this.$mainMenu.show();
        } else {
            this.$mainMenu.hide();
        }
    }
}

/**
 * 获取URL指定当前页面
 * @param pages 页面列表
 */
export function getCurrentPageByUrl(pages: platformControls.tabPage[])
    : platformControls.tabPage {
    // 当前页关键字
    const KEY_CURRENTPAGE = "page";
    // 当前页面ID
    let pageID = appClient.getUrlParamByKey(KEY_CURRENTPAGE);
    for (let index = 0, len = pages.length;
        index < len; index++) {
        let tabPage = pages[index];
        if (tabPage && tabPage.id && tabPage.id == pageID) {
            return tabPage;
        }
    }
    return undefined;
}
